<template>
  <div>
    <div class="seller_logo">
      <div>
        <img :src="storeData.logo" style="width: 200px;height:100px" alt />
      </div>
      <div>
        <div v-for="(item,index) in logList" :key="index" @click="toDetail(item.id)">
            <div>
            <img style="width:100px" :src="item.image" alt />
          </div>
          <div>
            <p>{{item.title}}</p>
            <p>￥{{item.discount_price}}</p>
            <span>全场优惠折扣</span>
          </div>
        </div>
      </div>
    </div>
    <div class="seller_nav">
      <div>
          <span class="seller_span">卖家首页</span>
          <span class="seller_span" @click="btnGoodsTop('allGoodsContent',250)">所有商品</span>
          <span class="seller_span" @click="btnGoodsTop('selectionContent',0)">商品选型</span>
          <span class="seller_span" @click="btnGoodsTop('companyContent',0)">店铺介绍</span>
        <!-- <router-link to>
          <span class="seller_span">塑壳断路器</span>
        </router-link> -->
      </div>
    </div>
    <div class="carousel">
      <img :src="bander" alt />
    </div>
    <div class="company">
      <div class="company_top">
        <p>公司介绍</p>
        <p>COMPANY INTRODUCTION</p>
      </div>
      <div class="company_content" ref="companyContent">
        <div>
          <el-carousel height="380px">
            <el-carousel-item v-for="(item,index) in storeData.images" :key="index">
              <img :src="item" alt style="width:100%;height:100%" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div>
          <div>
            <img :src="storeData.logo" alt style="width: 200px;height:100px" />
          </div>
          <div>{{storeData.introduction}}</div>
        </div>
      </div>
    </div>
    <div class="product_selection">
      <div class="company_top">
        <p>商品选型</p>
        <p>COMPANY INTRODUCTION</p>
      </div>
      <div class="selection_content" ref="selectionContent">
        <div>
          <div>
            商家
            <br />品牌
          </div>
          <div v-for="(item,index) in brandList" :key="index">
            <router-link :to="`/brandId/?id=${item.id}&dpid=${storeId}`" style="display: contents">
              <img :src="item.pc_logo_image" alt />
            </router-link>
          </div>
        </div>
        <div>
          <div>
            商家
            <br />系列
          </div>
          <div v-for="(item,index) in seriesList" :key="index">
            <router-link :to="`/brandId/?seId=${item.id}&dpid=${storeId}`" style="display: contents">
              <img :src="item.img" alt />
              <span style="margin-right:10px">{{item.name}}</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="allGoods">
      <div class="company_top">
        <p>全部商品</p>
        <p>ALL PRODUCTS</p>
      </div>
      <div class="allGoods_content" ref="allGoodsContent">
        <div
          v-for="(item,index) in goodsList"
          :key="index"
          class="b-wrap-list"
          style
          id="elePicData"
        >
          <div class="pro-box">
            <div class="pic">
              <router-link :to="`/detail/${item.id}`" target="_blank">
                <img :src="item.image" />
              </router-link>
            </div>
            <ul class="detail">
              <li>
                <span class="spec" style="margin:8px 0">{{item.title}}</span>
              </li>
              <li v-if="item.parameters" style="margin:8px 0">
                <span class="spec">
                  <span style="color:#333">参</span>
                  <span style="color:#333;margin-left: 13px;">数:</span>
                  {{Object.values(item.parameters).join('&emsp;|&emsp;')}}
                </span>
              </li>
              <li style="margin:8px 0">
                <label>型&nbsp;&nbsp;&nbsp;号：</label>
                <span class="stext" title="5SY4150-6CC(B50 1P)">{{item.model_name}}</span>
              </li>
              <li style="margin:10px 0">
                <label>订货号：</label>
                <span class="stext" title="5SY41506CC">{{item.part_number}}</span>
              </li>
              <li style="margin:10px 0">
                <span class="dis-price">¥{{item.discount_price}}</span>
                <span class="price">¥{{item.price}}</span>
              </li>
            </ul>
            <div class="botom">
              <div style="display: flex;">
                <svg-icon
                  icon-class="gowuche"
                  class-name="gowuche"
                  onclick="addItemCart(14322, this)"
                  style="font-size: 25px;margin-top: 1px;"
                />
                <!-- <i class="cart"></i> -->
                <div class="cart-num-edit">
                  <el-input-number v-model="item.num" @change="amountChange" :min="0" :max="100"></el-input-number>
                </div>
                <a href="#" class="clear-text" onclick="clearCartNum(this,14322)">清空</a>
              </div>
            </div>
          </div>
        </div>
        <div class="btn_AddCart" ref="addCart" @click="btnAddCart">
          加
          <br />入
          <br />到
          <br />购
          <br />物
          <br />车
        </div>
      </div>
      <div class="laypage">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="metaData.current_page"
          :page-count="metaData.last_page"
          @prev-click="prev"
          @next-click="uanext"
          @current-change="btn_current"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { shopGoods, brandSeries, sxgroup } from "@/api/business";
import { addCartMulti } from "@/api/cart";
export default {
  data() {
    return {
      logList: [
        {
          img: "https://s1.ax1x.com/2020/07/06/UP9qQe.png",
          title: "小型断路器",
          price: 145.0
        },
        {
          img: "https://s1.ax1x.com/2020/07/06/UP9xot.png",
          title: "塑壳断路器",
          price: 145.0
        }
      ],
      metaData: [],
      pageIndex: 1,
      bander: "https://s1.ax1x.com/2020/07/06/UPuQ1A.png",
      companyImg: "https://s1.ax1x.com/2020/07/06/UP1eWF.png",
      brandList: [],
      seriesList: [],
      amount: "",
      parameters: "6666",
      goodsList: [],
      storeData: [],
      storeId:1
    };
  },
  mounted() {
    this.setHasNav(false);
  },
  created() {
    this.storeId = this.$route.query.id;
    this.getGoodsList();
    this.getbrandSeries();
    this.getsxgroup();
  },
  methods: {
    ...mapMutations({
      setHasNav: "app/SET_PAGE_HAS_NAV"
    }),
    async getGoodsList() {
      let index = this.pageIndex;
      const res = await shopGoods(this.storeId, index);
      res.data.forEach(item => {
        item.num = 0;
      });
      this.logList = res.data.splice(0,2);
      console.log(this.logList);
      this.goodsList = res.data;
      this.metaData = res.meta;
    },
    // 上一页
    prev() {
      this.pageIndex--;
      this.getGoodsList();
      return;
    },
    // 下一页
    uanext() {
      this.pageIndex++;
      this.getGoodsList();
      return;
    },
    // 点击选页
    btn_current(e) {
      this.pageIndex = e;
      this.getGoodsList();
      return;
    },

    async getbrandSeries() {
      const res = await brandSeries(this.storeId);
      this.brandList = res.splice(0, 7);
      for (let i of this.brandList) {
        this.seriesList = this.seriesList.concat(i.series).splice(0, 7);
      }
      console.log(this.seriesList)
    },

    amountChange(val) {
      console.log(this.goodsList);
    },
    // 添加到购物车
    async btnAddCart() {
      const goods = [];
      const goodsListn = this.goodsList.filter(item => item.num > 0);
      goodsListn.forEach(item => {
        goods.push({
          product_id: item.id,
          amount: item.num
        });
      });
      if (!goods.length) {
        this.$message.warning("请输入数量！");
        return;
      }
      try {
        await addCartMulti({ items: goods });
        this.$message.success("添加购物车成功！");
        this.goodsList.forEach(item => {
          item.num = 0;
        });
      } catch (error) {
        console.log(error);
      }
    },

    btnGoodsTop(el, tp) {
      let speed = 50;
      let windowH = window.innerHeight; //获取浏览器高度
      let h = this.$refs[el].offsetHeight; //模块高度
      let t = this.$refs[el].offsetTop - tp; //模块相对于内容顶部的距离
      let top = t - (windowH - h) / 2;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; //滚动条距离顶部高度
      console.log(scrollTop);
      let currentTop = scrollTop; //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
      let requestId;
      function step() {
        //判断让滚动条向上滚还是向下滚
        if (scrollTop < top) {
          if (currentTop <= top) {
            //   window.scrollTo(x,y) y为上下滚动位置
            window.scrollTo(0, currentTop);
            requestId = window.requestAnimationFrame(step);
          } else {
            window.cancelAnimationFrame(requestId);
          }
          //向下滚动
          currentTop += speed;
        } else {
          if (top <= currentTop) {
            //注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
            window.scrollTo(0, currentTop - speed);
            requestId = window.requestAnimationFrame(step);
          } else {
            window.cancelAnimationFrame(requestId);
          }
          //向上滚动
          currentTop -= speed;
        }
      }
      window.requestAnimationFrame(step);
    },

    // 获取店铺信息
    async getsxgroup() {
      const res = await sxgroup(this.storeId);
      this.storeData = res;
    },

    // 活动
    toDetail(id){
      this.$router.push(`/detail/${id}`)
    }
  }
};
</script>

<style lang="scss">
.seller_logo {
  height: 150px;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  > div {
    padding: 15px 0;
    &:nth-child(1) {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &:nth-child(2) {
      flex: 2;
      display: flex;
      > div {
        display: flex;
        flex: 1;
        align-content: center;
        justify-content: center;
        > div {
          &:nth-child(2) {
            display: flex;
            flex-flow: column;
            justify-content: center;
            > p {
              padding-bottom: 10px;
              &:nth-child(1) {
                font-size: 19px;
                font-weight: 700;
              }
              &:nth-child(2) {
                font-size: 20px;
                font-weight: 800;
                color: #ff0000;
              }
            }
            > span {
              padding: 2px 6px;
              color: #fff;
              background-color: forestgreen;
              text-align: center;
              border-radius: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
.seller_nav {
  width: 100%;
  height: 45px;
  background-color: #4448f8;
  > div {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 100%;
  }
}
.seller_span {
  padding: 0 32px;
  font-size: 16px;
  color: #fff;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.seller_span:hover {
  font-size: 20px;
}
.carousel {
  > img {
    height: 440px;
  }
}
.company {
  padding-top: 70px;
}
.company_top {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  > p {
    &:nth-child(1) {
      font-size: 40px;
      color: #009944;
      padding-bottom: 25px;
    }
    &:nth-child(2) {
      font-size: 40px;
      color: #c4e3d2;
      padding-bottom: 30px;
    }
  }
}
.company_content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  height: 380px;
  display: flex;
  > div {
    &:nth-child(1) {
      width: 790px;
    }
    &:nth-child(2) {
      width: 410px;
      padding: 39px 45px;
      background: #eeeeee;
      > div {
        font-size: 17px;
        color: #666;
        &:nth-child(1) {
          display: flex;
          justify-content: center;
        }
        &:nth-child(2) {
          padding-top: 60px;
        }
      }
    }
  }
}
.product_selection {
  padding-top: 70px;
}
.selection_content {
  width: 1200px;
  background-color: #e3e3e3;
  border-radius: 10px;
  margin: 0 auto;
  padding: 12px;
  > div {
    &:nth-child(1),
    &:nth-child(2) {
      display: flex;
      div {
        width: 130px;
        height: 130px;
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 13px;
        transition: all 0.3s ease-in-out;
        &:hover {
          transform: translate3d(0, -10px, 0);
          box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
        }
        img {
          width: 80%;
        }
        &:nth-child(1) {
          font-size: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          line-height: 35px;
        }
      }
    }
    &:nth-child(2) {
      margin-top: 13px;
      img {
        width: 15% !important;
      }
    }
  }
}
.allGoods {
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/*大图列表*/
.b-wrap-list {
  margin-top: 20px;
  margin-left: -13px;
}
.b-wrap-list .pro-box {
  float: left;
  margin-left: 13px;
  position: relative;
  border-radius: 3px;
  margin-bottom: 15px;
  border: 1px solid #dedede;
  width: 220px;
  background: #fff;
  height: 380px;
  box-sizing: border-box;
}
.b-wrap-list .no-cout {
}
.b-wrap-list .has-count {
  border: 2px solid red;
  box-shadow: #ccc 0 0 8px;
}

.b-wrap-list .pro-box .pic {
  width: 220px;
  height: 180px;
  overflow: hidden;
  text-align: center;
}
.b-wrap-list .pro-box .pic img {
  margin-top: 15px;
  max-width: 170px;
  max-height: 170px;
}
.b-wrap-list .pro-box .detail {
  margin-left: 8px;
}
.b-wrap-list .pro-box .detail > li {
  display: block;
  margin-top: 6px;
  text-align: left;
}
.b-wrap-list .pro-box .detail > li > span {
  color: #979797;
}
.b-wrap-list .pro-box .detail > li .name {
  color: #000;
  margin-left: 3px;
  line-height: 18px;
  display: inline-block;
  vertical-align: middle;
  width: 135px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.b-wrap-list .pro-box .detail > li .spec {
  display: inline-block;
  width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.b-wrap-list .pro-box .detail > li .dis-price {
  font-size: 18px;
  color: red;
  font-family: Arial, Helvetica, sans-serif;
}
.b-wrap-list .pro-box .detail > li .price {
  margin-left: 8px;
  text-decoration: line-through;
  font-family: Arial, Helvetica, sans-serif;
}
.b-wrap-list .pro-box .detail > li .stext {
  display: inline-block;
  vertical-align: middle;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}
.b-wrap-list .pro-box .botom {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #f8f8f8;
  height: 38px;
  border-top: 1px solid #dedede;
}
.b-wrap-list .pro-box .botom > div {
  margin-left: 15px;
  margin-top: 4px;
}
.b-wrap-list .pro-box .botom .clear-text {
  display: none;
  color: #9d9d9d;
  margin-left: 5px;
}
.b-wrap-list .pro-box .botom .cart {
  position: relative;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  background: url(~@/assets/img/icon_cart_red.png) no-repeat;
}
.b-wrap-list .pro-box .botom .cart .num {
  position: absolute;
  right: -10px;
  top: -10px;
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: red;
  color: #fff;
  line-height: 20px;
  text-align: center;
}
.allGoods_content {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.laypage {
  display: inline-block;
  margin: 50px 0;
}
.btn_AddCart {
  background: #4448f8;
  position: absolute;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  display: flex;
  font-weight: 600;
  line-height: 25px;
  right: -10px;
  top: 40%;
  width: 50px;
  height: 180px;
  user-select: none;
  cursor: pointer;
}
</style>